<template>
    <div>
        <div class="top">
            <div class="img">
                <image src="/static/images/icon-share.webp" mode="" />
            </div>
            <div class="desc">
                <p>店推宝</p>
                <span>创建二维码->扫码生成文章->分享小红书</span>
            </div>
        </div>

        <div class="share_count">
            <span>可用分享次数</span>
            <div class="flex flex-v-center">
                <p>{{userInfo.shareCodeCnt}}次</p>
                <div class="flex flex-v-center mar-l20 fs24" @click="$navigate.toVip('02')">
                    <em>去充值</em>
                    <i class="fs20 icon-arrow-right"></i>
                </div>
            </div>
        </div>

        <div class="ad_type_list">
            <div class="ad_type_item" @click="$navigate.to('/pages/admin/house/codeList')">
                <p>二维码列表</p>
                <div class="ad_des">
                    <span>扫码生成文章</span>
                </div>
                <div class="icon">
                    <image src="/static/images/userIcon/ad/bannercodebaner.webp" mode="" />
                </div>
            </div>
            <div class="ad_type_item" @click="$navigate.to('/pages/admin/house/imgMaterial')">
                <p>图片素材</p>
                <div class="ad_des">
                    <span>主图、轮播</span>
                </div>
                <div class="icon">
                    <image src="/static/images/userIcon/ad/poster-Ad.webp" mode="" />
                </div>
            </div>
            <div class="ad_type_item" @click="$navigate.to('/pages/admin/house/record')">
                <p>账单记录</p>
                <div class="ad_des">
                    <span>分享、充值记录</span>
                </div>
                <div class="icon">
                    <image src="/static/images/userIcon/ad/recharge.png" mode="" />
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
    data() {
        return {

        }
    },
    computed: {
        ...mapState({
            userInfo: state => state.user.userInfo
        }),
    },
    onShow() {
        this.$refreshUserInfo()
    }

}
</script>

<style lang="less" scoped>
    .top{
        width: 100%;
        height: 200rpx;
        background: #fff;
        .align(v-center);
        padding: 0 30rpx;
        .img{
            width: 110rpx;
            height: 110rpx;
            margin-right: 20rpx;
            image{
                width: 100%;
                height: 100%;
            }
        }
        .desc{
            p{
                font-size: 32rpx;
                font-weight: bold;
                margin-bottom: 15rpx;
            }
            span{
                font-size: 28rpx;
                color: #666;

            }
        }
    }
    .share_count{
        width: 700rpx;
        height: 80rpx;
        display: flex;
        background: #fff;
        justify-content: space-between;
        align-items: center;
        padding: 0 30rpx;
        margin: 30rpx auto 0;
        border-radius: 10rpx;
        span{
            font-size: 28rpx;
            color: #666;
        }
        p{
            font-size: 32rpx;
            font-weight: bold;
            color: @mainColor;
        }
        i, em{
            color: #426efa;
        }
    }
    .ad_type_list{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 30rpx;
        .ad_type_item{
            width: 330rpx;
            height: 230rpx;
            background: #fff;
            border-radius: 16rpx;
            margin-bottom: 30rpx;
            box-shadow: 0 0 10rpx #e5e5e5;
            padding: 30rpx;
            position: relative;
            display: flex;
            flex-direction: column;
            p{
                font-size: 32rpx;
                font-weight: bold;
                margin-bottom: 20rpx;
            }
            .ad_des{
                flex: 1;
                width: 100%;
                padding-right: 70rpx;
                display: flex;
                flex-direction: column;
                justify-content: flex-end;
                span{
                    color: #999;
                    font-size: 28rpx;
                }
            }
            .icon{
                width: 80rpx;
                height: 80rpx;
                border-radius: 50%;
                position: absolute;
                right: 20rpx;
                bottom: 20rpx;
                .align(center);
                image{
                    width: 40rpx;
                    height: 40rpx;
                }
            }
            &:nth-child(1) .icon {
                .gradient(#406dfa,#7f9cf5, 180deg);
            }
            &:nth-child(2) .icon {
                .gradient(#f44711,#ff9474, 180deg);
            }
            &:nth-child(3) .icon {
                .gradient(#009013,#46f06e, 180deg);
            }
            &:nth-child(4) .icon {
                .gradient(#c800ff,#ed95f5, 180deg);
            }
        }
    }
</style>